<!DOCTYPE html>
<html lang="zh_cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文章列表</title>
    <link rel="stylesheet" href="../../static/third/layui/css/layui.css" th:href="@{/third/layui/css/layui.css}">

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <div th:replace="admin/common/header::header"></div>
    <div th:replace="admin/common/side::side"></div>


    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <table class="layui-hide" lay-filter="test" id="test"></table>
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

        </div>
    </div>

    <!--<div class="layui-footer">-->
        <!--&lt;!&ndash; 底部固定区域 &ndash;&gt;-->
        <!--© layui.com - 底部固定区域-->
    <!--</div>-->
</div>
<script src="../../static/third/layui/layui.js" th:src="@{/third/layui/layui.js}"></script>

<script>
    //JavaScript代码区域
    layui.use(['element','table','jquery','laytpl'], function(){
        var element = layui.element;
        var table = layui.table;
        var jquery = layui.jquery;
        var $ = jquery;
        var laytpl = layui.laytpl;

        table.render({
            elem: '#test'
            ,url:'/admin/article/list'
            ,cols: [
                [
                {field:'articleId', width:80, title: 'ID', sort: true}
                ,{field:'title', width:80, title: '标题',minWith:150, width: '12%'}
                ,{field:'description', width:80, title: '简介',width:'18%'}
                ,{field:'createTime', width:80, title: '创建时间', sort: true,width:'13%',templet : "<div>{{layui.util.toDateString(d.createTime, 'yyyy年MM月dd日 HH:mm:ss')}}</div>"}
                ,{field:'updateTime', width:80, title: '修改时间', sort: true,width:'13%',templet : "<div>{{layui.util.toDateString(d.updateTime, 'yyyy年MM月dd日 HH:mm:ss')}}</div>"}
                ,{field:'status', width:80, title: '状态',templet:'#statusTpl'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
            ]
            ]
            ,page: true
        });

        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    // 删除数据
                    // 发起ajax请求
                    // 获取删除对象的id
                    var articleId = obj.data.articleId;
                    $.ajax({
                        url:'/admin/article/delete/'+articleId,
                        type:'get',
                        success:function (data) {
                            obj.del();
                            layer.close(index);
                        }
                    })
                });
            } else if(obj.event === 'edit'){
                // layer.alert('编辑行：<br>'+ JSON.stringify(data))
                var articleId = obj.data.articleId;
                // 获取id
                window.location = '/admin/article/edit/'+articleId;
            }
        });
    });
</script>
<!--对模板进行渲染-->
<script title="text/html" id="statusTpl">
    {{#if (d.status === 0) { }}
        未发布
        {{# }else if(d.status === 1){ }}
        已发布
        {{# } }}

</script>
</body>
</html>